<template>
  <view class="container">
    <view class="zl-flex top-tabbar"
          v-if="isShow">
      <image class=""
             style="width: 750rpx;height: 88rpx;position: absolute;top:0;left: 0;"
             src="https://zl.zhim123.com/mini_app/nav/step2.png">
      </image>
      <image class=""
             v-if="step===1"
             style="width: 750rpx; height: 88rpx; position: absolute; top: 0; right: 0;"
             src="https://zl.zhim123.com/mini_app/nav/step1.png">
      </image>
      <view class="tabitem zl-flex zl-row-center zl-font-26 zl-font-500 zl-color-white">
        <view class="num zl-flex zl-row-center"> 1 </view> 填写文案内容
      </view>
      <view class="tabitem1 zl-flex zl-row-center zl-font-26 zl-font-500 zl-color-white">
        <view class="num zl-flex zl-row-center"
              :style="{ 'color': step===1?'#1432e7':'#1432E7'}"> 2 </view>生成文案
      </view>
    </view>
    <view v-show="step===1 && isShow"
          class="list-box">
      <view class="list-item zl-m-b-20"
            v-for="(item,index) in list"
            :key="index">
        <view v-if="item.inputType===5">
          <view class="title"
                style="height: 50rpx;">
            <view class="num">{{index+1}}</view>
            <view class="zl-font-32 zl-color-333 zl-font-600">{{item.key}}
            </view>
            <image class=""
                   v-if="item.isParamDes"
                   @click="openParamStr(item)"
                   style="width: 30rpx;height: 30rpx;margin-left: 15rpx;"
                   src="/static/aiCreate/icon_wenan_query.png">

            </image>
          </view>
          <view class="item-box">
            <view :class="isChecked(obj,index)?'act':''"
                  class="item zl-flex zl-row-center"
                  v-for="(obj,idx) in item.paramStr"
                  :key="idx"
                  @click="chooseItem(obj,index,item)">
              {{obj.label}}
            </view>
          </view>
        </view>
        <view v-else-if="item.inputType===2">
          <view class="title"
                style="height: 50rpx;">
            <view class="num">{{index+1}}</view>
            <view class="zl-font-32 zl-color-333 zl-font-600">{{item.key}}</view>
          </view>
          <view class="zl-m-t-20 "
                style="background: #fff;border-radius: 8rpx;">
            <textarea style="height: 500rpx;padding: 20rpx;width: 630rpx;"
                      placeholder-style="font-size:28rpx"
                      :placeholder="item.placeholder"
                      :cursor-spacing="160"
                      :adjust-position="true"
                      maxlength="20000"
                      v-model="item.value"></textarea>
          </view>
        </view>
        <view v-else>
          <view class="title"
                style="height: 50rpx;">
            <view class="num">{{index+1}}</view>
            <view class="zl-font-32 zl-color-333 zl-font-600">{{item.key}}</view>
          </view>
          <view class="cell-box zl-flex zl-row-between"
                style="background: #fff;border-radius: 8rpx;">
            <input :cursor-spacing="160"
                   :adjust-position="true"
                   v-model="item.value"
                   :type="inputType[item.inputType]"
                   :style="{'width':item.unit?'90%':'100%','height':'70rpx'}"
                   :auto-height="true"
                   placeholder-style="font-size:28rpx"
                   :placeholder="item.placeholder" />
            <text class="zl-m-r-20">{{item.unit}}</text>
          </view>
        </view>

      </view>

      <!-- <view v-for="(item,index) in titleTemplate.replace"
            :key="index"
            class="box_item zl-m-b-20">
        <view class="zl-m-b-20">
          <text class="zl-font-28 zl-m-r-8"
                style="color: #f65754;">*</text>
          <text style="color: #fff;">{{item.key}}</text>
        </view>
        <view class="box-cell zl-flex zl-row-between"
              style="background: #fff;border-radius: 8rpx;">
          <u-input :cursor-spacing="cursorSpacing"
                   :adjust-position="true"
                   v-model="item.value"
                   required
                   :type="item.inputType"
                   :height="item.placeholder.length>20?'110':'80'"
                   placeholder-style="color:#70709F;font-size:26rpx"
                   :auto-height="true"
                   :placeholder="item.placeholder"
                   :clearable="false"
                   :custom-style="{
									 color:'#fff'
								 }" />
          <text class="zl-m-l-10 zl-color-white zl-font-28">{{item.unit}}</text>
        </view>
      </view> -->
    </view>
    <view v-show="step===2"
          class="list-box">
      <!-- 暂不开发 -->
      <!-- <view class="title">
        <view class="num">1</view>
        <view class="zl-font-32 zl-color-333 zl-font-600">视频标题</view>
      </view>
      <view class="content">
        <text>
          {{titleAnswer}}
        </text>
        <view class="zl-flex zl-row-between zl-m-t-30">
          <view class="zl-color-999 zl-font-24">内容由AI生成</view>
          <view class="zl-flex"
                style="gap:40rpx">
            <view class="zl-flex-col zl-col-center">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_again.png">
              </image>
              <text class="zl-font-20">重新生成</text>
            </view>
            <view class="zl-flex-col zl-col-center"
                  @click="edit(false)">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_edit.png">
              </image>
              <text class="zl-font-20">编辑文本</text>
            </view>
            <view class="zl-flex-col zl-col-center"
                  @click="$util.copy(titleAnswer)">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_copy.png">
              </image>
              <text class="zl-font-20">复制文本</text>
            </view>
          </view>
        </view>
      </view> -->
      <!-- 暂不开发 -->
      <!-- zl-m-t-30 -->
      <view class="title ">
        <view class="num">1</view>
        <view class="zl-font-32 zl-color-333 zl-font-600">视频文案</view>
      </view>
      <view class="content"
            v-if="contentAnswer">
        <text>
          {{contentAnswer}}
        </text>
        <view class="zl-flex zl-row-between zl-m-t-30">
          <view class="zl-color-999 zl-font-24">内容由AI生成</view>
          <view class="zl-flex"
                style="gap:40rpx">
            <view class="zl-flex-col zl-col-center"
                  @click="refresh">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_again.png">
              </image>
              <text class="zl-font-20">重新生成</text>
            </view>
            <view class="zl-flex-col zl-col-center"
                  @click="edit(true)">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_edit.png">
              </image>
              <text class="zl-font-20">编辑文本</text>
            </view>
            <view class="zl-flex-col zl-col-center"
                  @click="$util.copy(contentAnswer)">
              <image class=""
                     style="width: 39rpx;height: 39rpx;margin-bottom: 10rpx;"
                     src="/static/aiCreate/icon_wenan_copy.png">
              </image>
              <text class="zl-font-20">复制文本</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer-box zl-flex zl-row-center">
      <view v-show="step===2"
            @click="step=1"
            class="prebtn zl-flex zl-row-center"> 上一步 </view>
      <view :style="{'width':step===1?'690rpx':'420rpx'}"
            @click="goNext()"
            class="btn zl-flex zl-row-center">
        <view class=""> {{step===1?'创作视频文案':'创建数字人视频'}} </view>
      </view>
    </view>
    <uni-popup :animation="false"
               ref="popup4"
               type="bottom"
               background-color="#fff"
               border-radius="20rpx 20rpx 20rpx 20rpx"
               :is-mask-click="false">
      <view class=""
            style="height: calc(100vh - 100rpx);">
        <view class="zl-p-t-26 zl-p-l-26 zl-font-34 zl-font-500">
          {{flag?'视频口播文案':'视频标题文案'}}
        </view>
        <view style="height: calc(100% - 200rpx);width: 690rpx;margin: 0 auto;">
          <textarea style="margin: 30rpx 0;height: 100%;width: 100%;border: 2rpx solid #eee;border-radius: 8rpx;padding:26rpx;box-sizing: border-box;"
                    v-model="editContent"
                    placeholder="请输入文字"
                    placeholderStyle="color:#999;fontSize:28rpx;"
                    :cursor-spacing="80"
                    :maxlength="2000" />
        </view>
        <view class="zl-flex zl-row-between">
          <view class="btn99 zl-m-t-32 cancelBtn1"
                @click="cancelEdit"> 取 消 </view>
          <view class="btn99 zl-m-t-32 sure-btn"
                @click="sureEdit"> 确 认 </view>
        </view>
        <view class="safe-area-inset-bottom">
        </view>
      </view>
    </uni-popup>
    <uni-popup :animation="false"
               ref="popup5"
               type="center"
               :is-mask-click="false">
      <view class=" zl-flex-col zl-col-center zl-row-center"
            style="width: 550rpx;height: 450rpx;border-radius: 20rpx;background-color: #fff;">
        <image style="width: 160rpx;height: 160rpx;margin-bottom: 30rpx;"
               src="/static/aiCreate/video_img.png"
               mode=""></image>
        <view class="zl-color-333 zl-font-28 zl-theme-333">
          <view class=" loading zl-font-600 zl-color-000 zl-font-36">正在导入文案创建 <text>...</text>
          </view>
          <view class="zl-m-t-14 zl-color-666 zl-font-26 zl-text-center">系统正在导入刚刚创建的文案</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup :animation="false"
               ref="popup6"
               type="center"
               background-color="#fff"
               border-radius="20rpx 20rpx 20rpx 20rpx"
               :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center zl-row-center">
        <image style="width: 120rpx;"
               src="/static/icon/fail.png"
               mode="widthFix"></image>
        <view class="zl-color-000 zl-font-32 zl-font-600 zl-m-t-36">暂无AI模型，请联系客户经理！</view>
      </view>
      <image @click="close"
             style="width: 80rpx;margin-top: 70rpx;margin-left: 260rpx;"
             src="/static/icon/close-w.png"
             mode="widthFix"></image>
    </uni-popup>

    <uni-popup :animation="false"
               ref="popup7"
               type="center"
               background-color="#fff"
               border-radius="20rpx 20rpx 20rpx 20rpx"
               :is-mask-click="false">
      <view style="width: 690rpx;background-color: #fff;border-radius: 20rpx;padding:42rpx 38rpx 50rpx">
        <view style="text-align:center;"
              class="zl-font-34 zl-font-600 zl-m-b-30">文案结构类型</view>
        <view v-for="(item,index) in paramStr"
              class="zl-m-b-30"
              :key="index">
          <view class="zl-font-30 zl-font-600 zl-m-b-12">·{{item.label}}</view>
          <view class="zl-font-28 zl-color-999">{{item.value}}</view>
        </view>
        <view class="zl-flex zl-row-center"
              style="margin-top: 50rpx;">
          <view class="zl-theme-btn zl-flex zl-row-center zl-col-center"
                @click="$refs.popup7.close()"
                style="width: 300rpx;height: 88rpx;border-radius:44rpx">我知道了</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      store: undefined,
      storeCode: '',
      list: [],
      selectedItems: [],
      step: 1,
      titleTemplate: {},
      StorageInfo: [],
      count: 1,
      selector: [1, 5, 10, 20, 50, 100],
      sureSubmit: false,
      finalContent: '',
      sessionId: '',
      from: '',
      testanswer: '',
      cursorSpacing: 160,

      loadingData: false,
      titleAnswer: '',
      contentAnswer: '',
      editContent: '',
      flag: false,
      balanceInfo: {},
      inputType: ['', 'text', '', 'number', 'digit'],
      replacedContent: '',
      isShow: false,
      paramStr: []




    };
  },
  onLoad (opt) {
    console.log(opt);
    const type = JSON.parse(opt.type)

    uni.setNavigationBarTitle({
      title: opt.title
    });

    // if (opt.sessionId) {
    //   this.sessionId = opt.sessionId
    // }
    // if (opt.from) {
    //   this.from = opt.from
    // }
    // this.store = uni.getStorageSync('store');
    this.getList(type);
    // let str ='{"code":0,"msg":"","data":"上班族与学生族必备!304不锈钢打造,超长保温的秘密武器!一壶热水,暖暖一整天,你的健康,我们来守护。保温杯,你的贴心小助手,尽在xx品牌,为你的忙碌加油!"}'
    // console.log(str);
    // let obj = JSON.parse(str)
    // console.log(obj);
    // this.getTemplate();
    let that = this
    uni.getSystemInfo({
      success: function (res) {
        if (res.osName === 'ios') {
          that.cursorSpacing = 220
        } else {
          that.cursorSpacing = 160
        }
      }
    });
  },
  onShow () { },
  methods: {
    openParamStr (item) {
      this.paramStr = item.paramStr
      this.$refs.popup7.open()
    },
    getList (type) {
      this.api.aichat.gettemplate(
        {
          type: type
        }).then(res => {
          if (res.code === 0) {
            this.isShow = true
            this.templateID = res.data.templateId;
            this.templateContent = res.data.content;
            res.data.options.forEach(item => {
              if (item.inputType === 5) {
                item.paramStr = JSON.parse(item.paramStr)
              }
            })
            this.list = res.data.options;

            // const data =
            // {
            //   "templateId": 4396811678851077,
            //   "name": "IP人设营销",
            //   "type": 1,
            //   "content": "我是一个【行业】的【性别】老板，从事这个行业有【从业年限】年之久，我所经营的产品主要是【主打产品】，请帮我创作一条人设类爆款口播短视频文案，目的是为了宣传我的生意，吸引客户咨询，要求：文案的类型为【人设类型】，要包含我所经营的业务，通俗易懂，要符合短视频平台的规则，字数要求【视频时长】以内。",
            //   "options": [
            //     {
            //       "id": 4,
            //       "key": "人设类型",
            //       "inputType": 5,
            //       "placeholder": "请选择",
            //       "unit": "",
            //       "paramStr": "[{\"label\":\"励志型\",\"value\":\"励志型\"},{\"label\":\"专业型\",\"value\":\"专业型\"},{\"label\":\"成长类\",\"value\":\"成长类\"}]"
            //     },
            //     {
            //       "id": 5,
            //       "key": "行业",
            //       "inputType": 1,
            //       "placeholder": "例如：火锅",
            //       "unit": "",
            //       "paramStr": ""
            //     },
            //     {
            //       "id": 6,
            //       "key": "性别",
            //       "inputType": 5,
            //       "placeholder": "请选择",
            //       "unit": "",
            //       "paramStr": "[{\"label\":\"男\",\"value\":\"男\"},{\"label\":\"女\",\"value\":\"女\"}]"
            //     },
            //     {
            //       "id": 7,
            //       "key": "从业年限",
            //       "inputType": 3,
            //       "placeholder": "例如：10",
            //       "unit": "年",
            //       "paramStr": ""
            //     },
            //     {
            //       "id": 8,
            //       "key": "主打产品",
            //       "inputType": 1,
            //       "placeholder": "例如：特色火锅锅底",
            //       "unit": "",
            //       "paramStr": ""
            //     },
            //     {
            //       "id": 9,
            //       "key": "视频时长",
            //       "inputType": 5,
            //       "placeholder": "请选择",
            //       "unit": "",
            //       "paramStr": "[{\"label\":\"30s内\",\"value\":\"150字\"},{\"label\":\"60s内\",\"value\":\"300字\"}]"
            //     }
            //   ]
            // }

            // this.templateID = data.templateId;
            // this.templateContent = data.content;
            // data.options.forEach(item => {
            //   if (item.inputType === 5) {
            //     item.paramStr = JSON.parse(item.paramStr)
            //   }
            // })
            // this.list = data.options;
            this.list.forEach((item) => {
              //  inputType===5时，默认将第一个选项选中
              if (item.inputType === 5) {
                this.selectedItems.push({
                  value: item.paramStr[0].value,
                  key: item.key
                })
              }
            })
          } else {
            this.$refs.popup6.open()
            // this.$util.msg(res.msg);
          }
        }).catch(err => {
          this.$util.msg('请检查网络连接！');
        })
    },
    close () {
      this.$refs.popup6.close()
      uni.navigateBack({
        delta: 1
      })
    },
    getTemplate () {
      this.api.aichat.getTemplate().then(res => {
        if (res.code === 0) {
          this.titleTemplate = res.data;
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    isChecked (item1, index) {
      for (let i = 0; i < this.selectedItems.length; i++) {
        if (this.selectedItems[i].value === item1.value) {
          return true
        }
      }
    },
    chooseItem (obj, index, item) {
      console.log(obj, index);

      if (this.selectedItems && this.selectedItems.length > 0) {
        this.selectedItems.forEach((it, i) => {
          if (it.value === obj.value) {
            // this.selectedItems.splice(i, 1)
          } else {
            const tep = {
              value: obj.value,
              key: item.key,
            }
            this.selectedItems.forEach((it, i) => {
              if (it.key === item.key) {
                this.selectedItems.splice(i, 1, tep)
              }
            })
          }
        })
      } else {
        const tep = {
          value: obj.value,
          key: item.key,
        }
        this.selectedItems.splice(index, 1, tep)
      }

      this.list.forEach((item) => {
        this.selectedItems.forEach((it) => {
          if (item.key === it.key) {
            item.value = it.value
          }
        })
      })
    },
    replacePlaceholders () {
      let replacedContent = this.templateContent;
      this.selectedItems.forEach((item) => {
        const key = `【${item.key}】`;
        replacedContent = replacedContent.replace(new RegExp(key, 'g'), item.value);
      });
      this.list.forEach((item) => {
        // console.log(item);
        const key = `【${item.key}】`;
        replacedContent = replacedContent.replace(new RegExp(key, 'g'), item.value);
      });
      return replacedContent;
    },
    goNext () {
      if (this.step === 1) {
        var reg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/;
        for (let i = 0; i < this.list.length; i++) {
          var item = this.list[i];
          if (!item.value && item.inputType !== 5) {
            this.$util.msg('请输入' + item.key);
            return;
          }
          // if (!item.value && item.inputType === 5) {
          //   this.$util.msg('请选择' + item.key);
          //   return;
          // }
          if (reg.test(!item.value)) {
            this.$util.msg('个性化设置暂不允许使用表情字符！');
            return;
          }
        }

        this.replacedContent = this.replacePlaceholders()
        this.ssereq(this.replacedContent)
        this.step = 2

      } else if (this.step === 2) {
        this.$refs.popup5.open()
        // title=' + this.titleAnswer + '&content=' + this.contentAnswer
        uni.navigateTo({
          url: '/pages/create/video?content=' + this.contentAnswer
        })
        setTimeout(() => {
          this.$refs.popup5.close()
        }, 1500)


      }
    },
    refresh () {
      this.ssereq(this.replacedContent)
    },
    ssereq (replacedContent) {
      const req = {
        AiModel: 0,
        sessionId: this.sessionId ? this.sessionId : '',
        templateId: this.templateID,
        question: replacedContent,
      }
      // 加载中 uni
      uni.showToast({
        title: '文案生成中...',
        icon: 'loading',
        duration: 10000
      });
      this.api.aichat.qwenAll(req).then(res => {
        if (res.code === 0) {
          this.contentAnswer = res.data.answer
          this.sessionId = res.data.sessionId;
          uni.hideToast();
        } else {
          uni.hideToast();
          this.$util.msg(res.msg);

        }
      }).catch(err => {
        uni.hideToast();
        this.$util.msg('请检查网络连接！');
      })
    },

    edit (isContent) {
      this.$refs.popup4.open()
      this.flag = isContent
      if (isContent) {
        this.editContent = this.contentAnswer
      } else {
        this.editContent = this.titleAnswer
      }
    },
    sureEdit () {
      if (this.flag) {
        this.contentAnswer = this.editContent
      } else {
        this.titleAnswer = this.editContent
      }
      this.$refs.popup4.close()
      this.editContent = ''
    },
    cancelEdit () {
      this.$refs.popup4.close()
      this.editContent = ''
    },

  },
}
</script>
<style lang="scss">
page {
  // background: linear-gradient(360deg, #170D36 0%, #1D1D82 100%);
  background-color: #eef0f4;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: auto;

  .top-tabbar {
    position: relative;
    width: 750rpx;
    height: 88rpx;
    margin-top: 20rpx;

    .tabitem {
      position: absolute;
      left: 93rpx;
      top: 31rpx;

      .num {
        width: 26rpx;
        height: 26rpx;
        background: #ffffff;
        border-radius: 13rpx;
        color: #1432e7;
        font-weight: 500;
        font-size: 22rpx;
        margin-right: 6rpx;
      }
    }
    .tabitem1 {
      position: absolute;
      right: 126rpx;
      top: 31rpx;

      .num {
        width: 26rpx;
        height: 26rpx;
        background: #ffffff;
        border-radius: 13rpx;
        color: #1432e7;
        font-weight: 500;
        font-size: 22rpx;
        margin-right: 6rpx;
      }
    }
  }
}

.list-box {
  width: 100%;
  height: calc(100vh - 300rpx);
  overflow: auto;
  padding: 50rpx 30rpx 50rpx;

  // .list_title {
  //   .num {
  //     width: 32rpx;
  //     height: 32rpx;
  //     background: #ffffff;
  //     border-radius: 16rpx;
  //     color: #190b64;
  //     font-weight: 600;
  //     font-size: 24rpx;
  //     margin-right: 10rpx;
  //   }
  // }
  .title {
    display: flex;
    align-items: center;
    .num {
      width: 32rpx;
      height: 32rpx;
      background: #000;
      border-radius: 4rpx;
      color: #fff;
      font-weight: 600;
      font-size: 24rpx;
      margin-right: 13rpx;
      text-align: center;
    }
  }
  .content {
    width: 690rpx;
    background: #fff;
    padding: 30rpx;
    border-radius: 18rpx;
    margin-top: 30rpx;
  }

  .item-box {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .item {
      width: 210rpx;
      height: 75rpx;
      background: #ffffff;
      border-radius: 18rpx;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
    }

    .act {
      // background: linear-gradient(
      //   90deg,
      //   #60b9c6 0%,
      //   #668cbd 50%,
      //   #3b5fcd 99%
      // ) !important;
      background-color: #000;
      color: #ffffff !important;
      opacity: 1 !important;
    }
  }
}

.footer-box {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 30rpx;
  width: 750rpx;
  height: 210rpx;
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;

  .prebtn {
    width: 240rpx;
    height: 110rpx;
    background: rgba(255, 255, 255, 0.17);
    border-radius: 18rpx;
    border: 2rpx solid #000000;
    margin-right: 20rpx;
    font-size: 36rpx;
    color: #000000;
  }

  // background-color: pink;
  .btn {
    width: 690rpx;
    height: 110rpx;
    background: #000000;
    border-radius: 18rpx;
  }
}

.cell-box {
  width: 690rpx;
  height: 80rpx;
  padding: 0 30rpx;
  border-radius: 8rpx;
  margin-top: 20rpx;
}

.box-cell {
  width: 690rpx;
  padding: 0 30rpx;
  border-radius: 8rpx;
  height: 80rpx;
  background: #fff;
  u-input {
    width: 86%;
    color: #fff !important;

    textarea {
      padding: 16rpx 0 !important;
    }
  }
}

.btn99 {
  width: 330rpx;
  height: 88rpx;
  margin: 0 auto;
  border-radius: 18rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sure-btn {
  background: #000;
  color: #fff;
}
.cancelBtn1 {
  background: #eeeeee;
  border: 2rpx solid #eee;
  font-weight: 600;
  font-size: 28rpx;
  color: #000;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 440rpx;
}

.loading text {
  font-size: 36rpx;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  animation: fadeIn 3s steps(3) forwards;
}

@keyframes fadeIn {
  from {
    width: 0;
  }

  to {
    width: 34rpx;
  }
}
.tip-box {
  width: 600rpx;
  height: 450rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 38rpx 60rpx 68rpx;
  z-index: 9999;
}
</style>